<template>
  <div class="BayonetTable">
    <FOURCONCOR />
    <i class="close" @click="changeBoxShow"></i>
    <PaddingCom :title="'告警管理'">
      <speedAlarmCom :title="'超速告警'" :list="speedList" />
      <el-divider></el-divider>
      <AlarmCom :title="'入侵告警'" :list="alarmList" />
    </PaddingCom>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { mapState, mapMutations, mapActions } from "vuex";
import PaddingCom from "components/paddingCom";
import speedAlarmCom from "components/speedAlarmCom";
import AlarmCom from "components/alarmCom";
import FOURCONCOR from "components/fourCorner";
export default {
  name: "BayonetTable",
  components: { PaddingCom, speedAlarmCom, AlarmCom, FOURCONCOR },
  // 定义属性
  data() {
    return {
      speedList: {}, //超速
      alarmList: {}, //入侵
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState({
      socketMessage: (state) => state.winconcrol.socketMessage, //这是mapState的使用方式
    }),
  },
  // 监控data中的数据变化
  watch: {
    socketMessage(n, o) {
      const { source } = n;
      if (source == 1) {
        // 海康入侵报警
        this.alarmList = n;
      } else if (source == 3) {
        // 宇视报警
        this.speedList = n;
      }
    },
  },
  // 方法集合
  methods: {
    changeBoxShow() {
      this.$emit("showbox", false);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    const { source } = this.socketMessage;
    if (source == 1) {
      // 海康入侵报警
      this.alarmList = this.socketMessage;
    } else if (source == 3) {
      // 宇视报警
      this.speedList = this.socketMessage;
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.BayonetTable {
  position: relative;
width: 19vw;
  padding: 0.78vw 0.78vw;
  background: rgba(11, 58, 113, 0.9);
  .close {
    width: 0.5vw;
    height: 0.5vw;
    display: block;
    position: absolute;
    right: 0.5vw;
    top: 0.5vw;
    background: url("../../../../../../assets/images/indexBody/amapDialog/closeButton.png");
    background-size: 100% 100%;
  }
}
.el-divider {
  background: #499be7;
  margin: 2vh 0;
}
</style>
